<template>
  <div v-show="isShow">
    <div class="alert">
      <div class="flex">{{ msg }}</div>
      <div
        class="btnCommon success"
        @click="close"
        v-if="type === 'alert'"
      >确定</div>
      <div
        v-else
        class="space-around"
      >
        <div
          class="btnCommon cancel"
          @click="cancelEvent"
        >取消</div>
        <div
          class="btnCommon success"
          @click="successEvent"
        >确定</div>
      </div>
    </div>
    <div
      class="mask"
      @click="closeMask"
    />
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "alert",
    },
    msg: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    success: {
      type: Function,
      default: () => {
        console.log("点击了success");
      },
    },
    cancel: {
      type: Function,
      default: () => {
        console.log("点击了cancel");
      },
    },
  },
  methods: {
    close() {
      this.isShow = false;
    },
    closeMask() {
      if (this.type !== "alert") return;
      this.close();
    },
    cancelEvent() {
      this.cancel();
      this.close();
    },
    successEvent() {
      this.success();
      this.close();
      // this.msg = "变变变";
    },
  },
};
</script>

<style lang="scss" scoped>
$btn-main: #009688;
$btn-dark: darken($btn-main, 5%);
.alert {
  width: 300px;
  height: 150px;
  position: fixed;
  background-color: #fff;
  border-radius: 6px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 10px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
  z-index: 999;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.flex {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.space-around {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 0 10px;
}

.btnCommon {
  width: 105px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 6px;
  &.success {
    background: $btn-main;
    color: #fff;
    &:hover {
      background: $btn-dark;
    }
  }
  &.cancel {
    background: #ededed;
    color: #333;
    &:hover {
      background: #dddddd;
    }
  }
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
}
</style>